<template>
  <div class="app">
    <!-- 上面的面包屑 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
          v-for="item in foldersList"
          :key="item.nodeId"
          @click.native="touch(item)"
          to='#'
          >{{ item.name }}</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <!-- 下方表格栏目 -->
    <div class="tableClass">
      <!-- 文件夹目录表格 -->
      <el-table
        style="folderTable"
        :data="tableFolderList"
        stripe
        :header-cell-style="{
          background: '#B6C4D3',
          color: '#1A1C1E',
          padding: '0',
        }"
        :header-row-style="{ height: '35px' }"
        :row-style="{ height: '25px' }"
        :cell-style="{ padding: '0px' }"
      >
        <!-- 表头 -->
        <el-table-column label="名称" fit>
          <template slot-scope="scope">
            <i class="el-icon-folder"></i>
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <!-- 对该列的操作 -->
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <!-- 点击事件传参为scope.row.* -->
            <el-button
              @click.native.prevent="clickEvent1(scope.row)"
              type="text"
            >
              删除文件夹
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 文件表格 -->
      <el-table
        class="fileTable"
        :data="tableFileList"
        stripe
        :header-cell-style="{
          background: '#B6C4D3',
          color: '#1A1C1E',
          padding: '0',
        }"
        :header-row-style="{ height: '35px' }"
        :row-style="{ height: '25px' }"
        :cell-style="{ padding: '0px' }"
      >
        <!-- 表头 -->
        <el-table-column label="名称" fit>
          <template slot-scope="scope">
            <i class="el-icon-document"></i>
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="format" label="资源格式" fit />
        <el-table-column prop="size" label="大小" fit />
        <el-table-column prop="uploadDate" label="上传时间" fit />
        <!-- 对该列的操作 -->
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <!-- 点击事件传参为scope.row.* -->
            <el-button
              @click.native.prevent="clickEvent1(scope.row)"
              type="text"
            >
              下载
            </el-button>
            <el-button
              @click.native.prevent="clickEvent1(scope.row)"
              type="text"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin: 20px 0 20px 0;float: left">
        <el-button>新建文件夹</el-button>
        <el-button>上传文件</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      foldersList: [
        {
          nodeId: 1,
          isFolder: true,
          name: "folder1",
          format: null,
          size: null,
          link: null,
          uploadDate: "2020-10-24",
        },
        {
          nodeId: 2,
          isFolder: true,
          name: "folder2",
          format: null,
          size: null,
          link: null,
          uploadDate: "2020-10-24",
        },
        {
          nodeId: 3,
          isFolder: true,
          name: "folder3",
          format: null,
          size: null,
          link: null,
          uploadDate: "2020-10-24",
        },
      ],
      tableFolderList: [
        //表格内文件夹
        {
          nodeId: 1,
          isFolder: true,
          name: "folder2",
          format: null,
          size: null,
          link: null,
          uploadDate: "2020-10-24",
        },
        {
          nodeId: 1,
          isFolder: true,
          name: "folder2",
          format: null,
          size: null,
          link: null,
          uploadDate: "2020-10-24",
        },
        {
          nodeId: 1,
          isFolder: true,
          name: "folder2",
          format: null,
          size: null,
          link: null,
          uploadDate: "2020-10-24",
        },
      ],
      tableFileList: [
        {
          nodeId: 2,
          isFolder: false,
          name: "file2",
          format: "txt",
          size: "120KB",
          link: "http://www.download.com/file2",
          uploadDate: "2020-10-24",
        },
        {
          nodeId: 2,
          isFolder: false,
          name: "file2",
          format: "txt",
          size: "120KB",
          link: "http://www.download.com/file2",
          uploadDate: "2020-10-24",
        },
      ],
    };
  },
  methods: {
    touch(item) {
      while (this.foldersList.pop() != item) {}
      this.foldersList.push(item);
    },
  },
};
</script>

<style scope>
.app {
  margin: 0 auto;
  margin-top: 50px;
  height: 500px;
  width: 60%;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.breadcrumb {
  margin: 15px;
}

.fileTable{
  margin-top: 20px;
}
</style>
